<template>
  <div class="layout">
    <header>
      <button @click="flag=!flag">菜单折叠</button>
      <router-link to="/login">退出登录</router-link>
    </header>
    <main>
      <div :class="['left',flag?'':'menu']">
        <ul>
          <li>
            <router-link to="/first">first</router-link>
          </li>
          <li>
            <router-link to="/second?second=2">second</router-link>
          </li>
          <li>
            <router-link to="/third/3">third</router-link>
          </li>
          <li>
            <router-link to="/forth/4?id=4">forth</router-link>
          </li>
        </ul>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </main>
    <footer>底部</footer>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      flag: true
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  header {
    height: 80px;
  }
  main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .left {
      width: 200px;
      height: 100%;
      background-color: pink;
      &.menu {
        width: 50px;
        transition: all  1s;
      }
      ul {
        li {
          height: 30px;
          text-align: center;
          line-height: 30px;
          margin: 20px 0;
          border-bottom: 1px solid #ccc;
        }
      }
    }
    .right {
      height: 100%;
      flex: 1;
      background-color: red;
      overflow: auto;
    }
  }
  footer {
    height: 80px;
  }
}

.router-link-exact-active {
  background-color: red;
}
</style>